<script setup>
const inputDialog = async () => {
    const result = await qly.dialog.input({
        title: '标题',
        message: '消息内容',
        placeholder: '请输入内容'
    })
    if (result.confirm) {
        if (result.value) {
            await qly.dialog.message({
                message: '输入的内容是' + result.value
            })
        } else {
            await qly.dialog.message({
                message: '未输入内容'
            })
        }
        
    } else {
        await qly.dialog.message({
            message: '取消了输入'
        })
    }
}

const message = async () => {
    await qly.dialog.message({
        message: '消息弹窗'
    })
}

const messageBox = async () => {
    const confirm = await qly.dialog.messageBox({
        message: '对话弹窗'
    })
    
    if (confirm) {
        await qly.dialog.message({
            message: '选择了确认'
        })
    }else {
        await qly.dialog.message({
            message: '选择了取消'
        })
    }
}

const messageSelect = async () => {
    const result = await qly.dialog.messageSelect({
        message: '选择弹窗',
        data: [
            {value: 1, label: '选项1'},
            {value: 2, label: '选项2'},
        ]
    })
    if (result.confirm) {
        await qly.dialog.message({
            message: '选择了' + result.item.label
        })
    }
}
</script>

<template>
    <view class="page-view">
        <button @click="inputDialog">输入弹窗</button>
        <button @click="message">消息弹窗</button>
        <button @click="messageBox">对话弹窗</button>
        <button @click="messageSelect">选择对话框</button>
    </view>
</template>

<style scoped>

button:not(:first-child){
    margin-top: 16rpx;
}

.page-view {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 100%;
    width: 100%;
}
</style>
